Прототипно-ориентированный язык программирования
Вечером 30 марта 2022 года (среда) в формате онлайн мы проводим Java/С++/ C#/TS/JS Hiring day.
Приглашаем всех заинтересованных в разработке на Java, С++, C#, JS, TS принять участие!
На митапе в течение часа мы расскажем:
• О разработке различных механизмов платформы корпоративных и облачных приложений, их внутреннем устройстве и принципах работы
• Опыте разработки highload-решений, которые ежедневно используют миллионы людей
Всем привет! Меня зовут Евгений, я работаю frontend-разработчиком в платформенной команде. Моя задача — помогать другим frontend-разработчикам выполнять их задачи эффективнее. Мы в Delivery Club больше года назад внедрили подход с микрофронтендами, о чём писали здесь. Вы можете найти и много других статей с описанием этого подхода.
После выхода стабильной версии Webpack 5 мы решили использовать плагин Module Federation в качестве основного способа загрузки микрофронтендов. В этой статье расскажу, с какой проблемой столкнулся при загрузке динамических модулей и как её решил. Описывать будут на примере плагина Module Federation во всех деталях. Если вы слышите про этот инструмент впервые, то советую предварительно ознакомиться.
Привет, друзья!
Представляю вашему вниманию первую часть перевода этой замечательной книги по WebRTC. Данная часть посвящена тому, что такое WebRTC, процессу сигнализации и установки соединения (первые 3 части оригинала).
Справедливости ради следует отметить, что на Хабре уже публиковался "вольный" перевод первых 2 частей оригинала (часть 1, часть 2), но автор по какой-то причине решил не продолжать. Я, свою очередь, решил начать с самого начала, без лишних вольностей и сокращений.
Ссылка на вторую часть перевода.
Если вам это интересно, прошу под кат.
Сегодня я хочу вам представить относительно новую библиотеку для управления глобальным состоянием приложения – Recoil JS. Как и React является open-source проектом при поддержке разработчиков из Meta. Пока что является экспериментальной, на момент написании статьи имеет версию 0.4.1.
Recoil располагает себя как библиотека исключительно для React, что поможет решать проблемы в диапазоне данного фреймворка, плюс ко всему разработчики, занимающиеся Recoil и React, из одной компании.
PureComponent, memo, useCallback и прочих возможностях, которые нам предоставляют создатели библиотеки для оптимизации наших приложений. Разработчики React уже позаботились о том, чтобы обновление DOM было предсказуемым и производительным: преобразования деревьев React-элементов выполняются максимально эффективно с помощью алгоритма согласования (reconciliation). Однако при большом количестве компонентов, глубокой вложенности или неправильной архитектуре количество отрисовок или вызовов функций может заметно увеличиться. Для оптимизации использования ресурсов мы применяем различные приёмы, позволяющие нам, к примеру, избавиться от лишних отрисовок с одинаковыми входными значениями props.
Фреймворк Angular используется при создании SPA и предлагает большое количество инструментов как для создания, непосредственно, элементов интерфейса, так и CLI для создания и управления структурой файлов, относящихся к приложению.
Для создания проекта с использованием библиотеки Angular, официальный сайт предлагает нам установить пакет angular-cli и далее из консоли запустить определенные команды, которые скачают нужные пакеты, создадут нужные файлы и останется только запустить приложение, однако что если мы не хотим использовать коробочное решение, мы хотим сами создать структуру папок, заполнить ее файлами, подключить нужные библиотеки и собрать, в общем полностью контролировать процесс создания приложения.
Я задался таким вопросом, и, после изучения этого вопроса я собрал это в туториал.
Всем привет! Меня зовут Игорь Савин, я frontend-разработчик в компании Домклик. На текущий момент у нас около 150 различных команд разработки, из которых большая часть связана с разработкой какого-либо фронтенда на HTML, CSS и Javascript. Но когда так много команд, непременно возникают ситуации, при которых в проект одной команды нужно встроить какую-то функциональность, разрабатываемую другой. И не просто встроить, но и потом поддерживать её работу, исправлять ошибки и внедрять новые фичи.
Цикл событий (event loop) — ключ к асинхронному программированию на JavaScript. Сам по себе язык однопоточный, но использование этого механизма позволяет создать дополнительные потоки, чтобы код работал быстрее. В этой статье разбираемся, как устроен стек вызовов и как они связаны с циклом событий.
Статья будет полезна как новичкам, так и опытным разработчикам. Первым она поможет понять, почему JavaScript настолько сильно отличается от других языков программирования и чем функция обратного вызова очень полезна на практике. Вторым — глубже разобраться в среде исполнения этого языка программирования.
Попытки побороть баг связанный с временем доставки, и синхронизировать обновление интервалов на сервере и на клиенте.
Привет, друзья!
В этой статье я хочу поделиться с вами результатами небольшого эксперимента, связанного с ускорением загрузки изображений с помощью Imgproxy, Cache API (далее — кеш) и Service Worker API (далее — СВ).
Мы с вами разработаем простое приложение на React, в котором используется несколько изображений, и добьемся того, что загружаемые изображения будут более чем в 10 раз легче (меньше по размеру) оригиналов (imgproxy), а также практически мгновенной загрузки (доставки) изображений (СВ и кеш).
Обратите внимание: в части, касающейся imgproxy, особых препятствий на пути использования рассматриваемого в статье подхода к загрузке изображений в продакшне нет, но в части, касающейся СВ, следует проявлять крайнюю осторожность, поскольку данная технология является экспериментальной — это означает, что поведение СВ во многом определяется конкретной реализацией (браузером), что в ряде случаев делает его довольно непредсказуемым. Возможно, для кеширования изображений лучше предпочесть старые-добрые HTTP-заголовки Cache-Control и Etag. Но эксперимент на то и эксперимент, чтобы, в том числе, искать новые ответы на старые вопросы.
Для тех, кого интересует только результат эксперимента, вот репозиторий с исходным кодом проекта.
Остальных прошу под кат.
В последнее время TS стал де-факто стандартом во фронтенд-разработке. Его достаточно просто начать использовать, и он приносит неоценимую пользу в любых web-приложениях. Но используя его, мы часто даже не задумываемся, насколько на самом деле это мощный инструмент. В большинстве ситуаций нам хватает базовых возможностей TS-а. Но иногда нам случается определить узкий и нестандартный тип. В этом случае можно либо ослабить типы с помощью any или unknown, либо попробовать решить непростую порой головоломку. В этой статье мы решим несколько интересных головоломок с типами.
Привет, Хаброжители! Стартовала весенняя распродажа от издательства «Питер».
Эту статью также можно было бы назвать «Чего по науке нельзя делать с GraphQL».
Читая различные посты в блогах и руководства, мы узнаем, что существует некий правильный способ работы с GraphQL. Но вдруг там о чем-то не упоминается? Потому, что какие-то вещи невозможно реализовать, либо потому, что та или иная реализация – это «очень плохая идея»?
Давайте немного повеселимся и поиграем с GraphQL нетрадиционным образом. Я не призываю вас реализовывать какие-либо из идей, изложенных здесь, и им определенно не место в продакшен-коде (но, если вы совершенно уверены в том, что делаете – почему нет). В этой статье я просто продемонстрирую несколько экспериментов, которые сам проделал с GraphQL. Некоторые из них – просто классные фокусы. Другие могут вам по-настоящему пригодиться. Мне же все они кажутся потрясающими.
Чтобы повысить производительность страниц фронтенда на основе React, в Yelp используют рендеринг на стороне сервера. После ряда инцидентов на продакшене в начале 2021 года, когда из шаблонов на основе Python в React было перенесено много страниц, стало понятно, что существующая система серверного рендеринга не масштабируется. Материалом о том, как решалась проблема, делимся к старту курса по Fullstack-разработке на Python.
Стилизация. Довольно насущный для меня момент. Несмотря на годы работы с React, стартуя новый проект, я каждый раз задумываюсь о стилизации. Я перепробовал многие её способы, больше и дольше всего я работал с css-modules и styled-components. Сегодня я хочу предложить вам рассмотреть еще один не менее интересный вариант.
Привет, друзья!
В данной статье я хочу показать вам, как разработать простое приложение для обмена сообщениями в режиме реального времени с использованием Socket.io, Express и React с акцентом на работе с медиа.
Функционал нашего приложения будет следующим:
main_room (при желании можно легко реализовать возможность выбора или создания других комнат);Репозиторий с исходным кодом проекта.
Если вам это интересно, прошу под кат.
За годы развития браузеры обзавелись множеством API и функциональных возможностей, благодаря которым превратились в невероятно мощные платформы приложений. Яркий пример — это современный веб-синтезатор, подробностями об устройстве которого делимся к старту курса по Fullstack-разработке на Python.
В этой статье показан наш опыт интеграции интернета вещей (IoT) и метавселенной Decentraland. В ней вы найдете список необходимых навыков и мини-инструкцию, чтобы попробовать самим. В конце мы добавили видео-презентацию, что в итоге получилось.
В этой статье вы увидите, как сделать генератор ASCII-арта из изображения.
ASCII-арт — это метод графического дизайна, который использует компьютеры для презентации и он состоит из изображений, собранных вместе из 95 печатных символов, определенных стандартом ASCII от 1963 года, и ASCII-совместимых наборов символов с проприетарными расширенными символами.
В минувшем году OWASP обновил список TOP-10 самых распространенных векторов атак на современные веб-приложения. Этот список претерпел ряд изменений по сравнению с его последней редакцией, которая была в далеком 2017 году. В связи с чем мне бы хотелось рассказать о наиболее серьезной угрозе современных веб-приложений, которая перешла с пятого на первое место, а именно про A01:2021-Broken Access Control.
Не сомневаюсь, что все прекрасно знают о том, что авторизация предоставляет пользователю права на выполнение определённых действий, а также процесс проверки (подтверждения) данных прав при попытке выполнения этих действий. Авторизация не эквивалентна аутентификации. После успешной аутентификации авторизация определяет, к каким функциям и данным может получить доступ пользователь, обеспечивая при этом надлежащее разграничение прав доступа.
Именно поэтому веб-приложению необходимы средства контроля доступа, позволяющие его пользователям использовать веб-приложение с различными привилегиями. Контроль доступа — это применение ограничений на то, кто (или что) может выполнять различные функции и получать доступ к запрошенным ресурсам. Нарушенный контроль доступа часто встречающаяся и часто критическая уязвимость в системе безопасности. Существуют несколько типов контроля доступа, равно как и уязвимостей, связанных с их нарушением.