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

Это будет моя самая короткая статья.

Когда-то я был молод и зелен и решал проблемы именно так, как их решают джуны. Алгоритм такой:

1. Узнать о проблеме
2. Локализовать проблему
3. Загуглить проблему и решение
4. Пофиксить проблему

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

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

Прошло 10 лет...

Привет, друзья!

Представляю вашему вниманию первую часть перевода этой замечательной книги по WebRTC. Данная часть посвящена тому, что такое WebRTC, процессу сигнализации и установки соединения (первые 3 части оригинала).

Справедливости ради следует отметить, что на Хабре уже публиковался "вольный" перевод первых 2 частей оригинала (часть 1, часть 2), но автор по какой-то причине решил не продолжать. Я, свою очередь, решил начать с самого начала, без лишних вольностей и сокращений.

Ссылка на вторую часть перевода.

Если вам это интересно, прошу под кат.

На Joomla CMS сделано очень много сайтов для образовательных учреждений самого разного уровня и сложности. На сайты образовательных учреждений распространяется (на момент написания статьи) Приказ Рособрнадзора от 14.08.2020 №831, согласно которому документация должна быть на сайте образовательного учреждения в текстовом и табличном виде, а так же в виде файлов, подписанных электронной подписью (ЭЦП, ЭП).

Данная статья показывает, как можно автоматизировать отображение данных о подписанте из PDF-файлов применительно к Joomla CMS (и не только), дабы избежать огромного количества ручной работы при изменении документации.

В конце статьи прикладывается ссылка на скачивание готового плагина для Joomla 3 и 4.

Выясняем почему Angular — лучшая платформа для микро-фронтенда.

Одной из проблем, свойственным заведениям из сферы HoReCa (рестораны, фастфуды, кафе и отели) и Call Center/Contact Center, является планирование расписания. Проблемы с планированием, в первую очередь, возникают из-за плавающих графиков, различных типов совмещений и построения рабочих графиков исходя из квалификации сотрудников (компетенции). Особенно остро данный вопрос стоит у крупных сетей с большим товарооборотом, где правильная расстановка смен определяет качество обслуживания, оперативность и, самое главное, влияет на выручку и прибыль заведения либо всей сети.

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

Всегда хотел взломать Хабр. Мечта такая, но как-то руки не доходили. И вот, вдохновившись статьей о праведном взломе через iframe src , я, как и автор поста @Maxchagin, решил исследовать функционал Хабра на предмет уязвимостей.

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

Всем привет! Меня зовут Игорь Савин, я frontend-разработчик в компании Домклик. На текущий момент у нас около 150 различных команд разработки, из которых большая часть связана с разработкой какого-либо фронтенда на HTML, CSS и Javascript. Но когда так много команд, непременно возникают ситуации, при которых в проект одной команды нужно встроить какую-то функциональность, разрабатываемую другой. И не просто встроить, но и потом поддерживать её работу, исправлять ошибки и внедрять новые фичи.

Цикл событий (event loop) — ключ к асинхронному программированию на JavaScript. Сам по себе язык однопоточный, но использование этого механизма позволяет создать дополнительные потоки, чтобы код работал быстрее. В этой статье разбираемся, как устроен стек вызовов и как они связаны с циклом событий.

Статья будет полезна как новичкам, так и опытным разработчикам. Первым она поможет понять, почему JavaScript настолько сильно отличается от других языков программирования и чем функция обратного вызова очень полезна на практике. Вторым — глубже разобраться в среде исполнения этого языка программирования.

Каждый кто когда то начинал программировать, начинал со строки Hello World! Так же и я, начал путь к своему проекту с этих слов! Привет Мир!

Привет, друзья!

В этой статье я хочу поделиться с вами результатами небольшого эксперимента, связанного с ускорением загрузки изображений с помощью Imgproxy, Cache API (далее — кеш) и Service Worker API (далее — СВ).

Мы с вами разработаем простое приложение на React, в котором используется несколько изображений, и добьемся того, что загружаемые изображения будут более чем в 10 раз легче (меньше по размеру) оригиналов (imgproxy), а также практически мгновенной загрузки (доставки) изображений (СВ и кеш).

Обратите внимание: в части, касающейся imgproxy, особых препятствий на пути использования рассматриваемого в статье подхода к загрузке изображений в продакшне нет, но в части, касающейся СВ, следует проявлять крайнюю осторожность, поскольку данная технология является экспериментальной — это означает, что поведение СВ во многом определяется конкретной реализацией (браузером), что в ряде случаев делает его довольно непредсказуемым. Возможно, для кеширования изображений лучше предпочесть старые-добрые HTTP-заголовки Cache-Control и Etag. Но эксперимент на то и эксперимент, чтобы, в том числе, искать новые ответы на старые вопросы.

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

Остальных прошу под кат.

В последнее время TS стал де-факто стандартом во фронтенд-разработке. Его достаточно просто начать использовать, и он приносит неоценимую пользу в любых web-приложениях. Но используя его, мы часто даже не задумываемся, насколько на самом деле это мощный инструмент. В большинстве ситуаций нам хватает базовых возможностей TS-а. Но иногда нам случается определить узкий и нестандартный тип. В этом случае можно либо ослабить типы с помощью any или unknown, либо попробовать решить непростую порой головоломку. В этой статье мы решим несколько интересных головоломок с типами.

Задачи стали проходить тестирование быстрее. Я просто добавил на сервер...

Здравствуйте! Под катом, опыт небольшой команды из Челябинска, которая делала релизы не вовремя, а потом изобрела велосипед. Если вы только строите процессы или вас мучает совесть из-за отложенных релизов, возможно этот опыт пригодиться. Также буду рад критике. Добро пожаловать!

Все мы тратим немало времени на отладку, копаясь в логах или читая трейсбеки (traceback, отчёты о трассировке стека). Любое из этих дел может оказаться сложным и длительным. Этот материал посвящён тому, как сделать трассировку стека и работу с исключениями как можно более простыми и эффективными.

На пути к этой цели мы узнаем о том, как реализовывать и использовать собственные перехватчики исключений (exception hook), которые позволяют убрать из трейсбеков весь «информационный шум». Мы поговорим о том, как улучшить читабельность отчётов о трассировке стека, как выводить в них лишь то, что нужно для решения проблем с Python-кодом и с возникающими в процессе его работы исключениями. Кроме того, мы посмотрим на несколько потрясающих Python-библиотек, в которых имеются готовые к использованию, хорошо сделанные перехватчики исключений. Их можно использовать без необходимости написания собственного кода перехватчиков.

Привет, Хаброжители! Стартовала весенняя распродажа от издательства «Питер».

Эту статью также можно было бы назвать «Чего по науке нельзя делать с GraphQL».

Читая различные посты в блогах и руководства, мы узнаем, что существует некий правильный способ работы с GraphQL. Но вдруг там о чем-то не упоминается? Потому, что какие-то вещи невозможно реализовать, либо потому, что та или иная реализация – это «очень плохая идея»?

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

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

Чтобы повысить производительность страниц фронтенда на основе React, в Yelp используют рендеринг на стороне сервера. После ряда инцидентов на продакшене в начале 2021 года, когда из шаблонов на основе Python в React было перенесено много страниц, стало понятно, что существующая система серверного рендеринга не масштабируется. Материалом о том, как решалась проблема, делимся к старту курса по Fullstack-разработке на Python.

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

Стек выбрали тот, с которым нам было комфортно работать на тот момент.

Сегодня я расскажу о новой библиотеке, которая позволяет использовать SQLite сразу из PHP и KPHP.

Создавать FFI пакеты — не просто. Под катом будут ответы на следующие вопросы:

• Как упростить установку и сделать библиотеку кроссплатформенной?
• Как не допустить утечек ресурсов?
• Как сделать библиотеку совместимой с KPHP и PHP?
• Какова производительность FFI решений?

Мы не только попробуем новую библиотеку в действии, но и выработаем ряд практик, которые при широком распространении могут улучшить ситуацию с FFI пакетами в сообществе.

Привет, друзья!

В данной статье я хочу показать вам, как разработать простое приложение для обмена сообщениями в режиме реального времени с использованием Socket.io, Express и React с акцентом на работе с медиа.

Функционал нашего приложения будет следующим:

• при первом запуске приложение предлагает пользователю ввести свое имя;
• имя пользователя и его идентификатор записываются в локальное хранилище;
• при повторном запуске приложения имя и идентификатор пользователя извлекаются из локального хранилища (имитация системы аутентификации/авторизации);
• выполняется подключение к серверу через веб-сокеты и вход в комнату main_room (при желании можно легко реализовать возможность выбора или создания других комнат);
• пользователи обмениваются сообщениями в реальном времени;
• типом сообщения может быть текст, аудио, видео или изображение;
• передаваемые файлы сохраняются на сервере;
• путь к сохраненному на сервере файлу добавляется в сообщение;
• сообщение записывается в базу данных;
• пользователи могут записывать аудио и видеосообщения;
• после прикрепления файла и записи аудио или видео сообщения, отображается превью созданного контента;
• пользователи могут добавлять в текст сообщения эмодзи;
• текстовые сообщения могут озвучиваться;
• и т.д.

Репозиторий с исходным кодом проекта.

Если вам это интересно, прошу под кат.

Меня зовут Николай, я Frontend-разработчик IT-компании Relog. Хочу рассказать о самых распространённых ошибках в вёрстке современных проектов.

Дело в том, что лишь малая часть современных фронтендеров обращает внимание на работу с HTML и CSS, предпочитая готовые решения, вроде UI-библиотек и систем сеток. Но эти решения неидеальные и приходится дописывать обёртки вокруг них, видоизменять код, переписывать стили и совершать прочие действия для соответствия требованиям проекта. Тут-то и начинаются проблемы: вёрстка местами становится избыточной, стили переназначются через important и с каждым релизом проект всё сложней поддерживать. Я уже не говорю об удобстве использования и доступности. Об этом думают вообще в последнюю очередь.

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