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

Базовая настройка webpack 5 + настройка для разработки на React (вкл. React Hot Reloading).

Что, зачем и почему?

Что? Webpack - сборщик модулей для JavaScript. Является одним из мощнейших инструментов современной веб-разработки.

Зачем? Webpack позволяет комфортно создавать приложения по модульной структуре, он собирает все модули в один бандл и минифицирует его. Но это лишь поверхностное описание возможностей этого инструмента, на деле вебпак имеет значительно больше возможностей.

Почему? Вам теперь больше нет необходимости беспокоится о сборке проекта, один раз настроил webpack и он все будет делать за вас!
P.S. Ну, или не один раз.
P.S.S. Ладно, точно не один раз.

Мы совместно с коллегами из Aitarget Tech, которые уже восемь лет ведут разработку в сфере рекламных технологий, обучили трансформационную ML-модель с целью генерации изображений для рекламных кампаний. Передаем слово Ане Корзун, стратегическому директору Aitarget, — она расскажет о кейсе подробнее.

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

В этой статье я хочу поговорить с вами об управлении состоянием и повторном рендеринге в React.js.

Что такое состояние и зачем им управлять?

Состояние/state можно определить как любые данные, которые влияют на рендеринг/rendering компонентов. Состояние хранится в реактивных переменных/reactive variables ](в терминологии RxJS).

Управление состоянием/state management — это механизм, позволяющий создавать реактивные переменные, фиксировать изменения их значений и уведомлять об этом "заинтересованные" компоненты. Как правило, такой механизм реализуется с помощью паттерна Издатель-Подписчик/Publisher-Subscriber/Pub-Sub.

Реакция компонентов на изменение состояния часто, но далеко не всегда завершается добавлением/модификацией/удалением HTML-элементов в/из DOM. Как известно, операции, связанные с манипулированием DOM, являются очень медленными. Это обуславливает необходимость грамотного управления состоянием приложений.

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

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

К примеру, покупаем 1 акцию по 1000, после падения до 900 усредняем еще одной акцией. Затем при отскоке до 950 продаем 1 акцию. В итоге оставшаяся акция в портфеле "горит зеленым" (образуется плюс +50 по правилу fifo), хотя фактический результат бумаги на данный момент будет 0 (без учета комиссий). Такое отображение бумаг в приложении может сбить с толку, и привести к неправильным решениям и большим потерям, при совершении множества сделок.

Идея вести дневник сделок в excel, или периодически копаться в налоговом/брокерском отчете, мне не понравилась. Зато приглянулась мысль - обрабатывать данные полученные из официального API.

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

В статье я продемонстрирую, как пользоваться созданным инструментом, и какие задачи решаются. Подсвечу некоторые особенности данных полученных из API.

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

Меня зовут Дмитрий Химион, я работаю в компании Авито и в последнее время занимаюсь механизмом, который автоматизировано детектирует деградации продуктов Авито, определяет потери и собирает информацию по сбоям.

Мечтаете без проблем развёртывать приложения в облаке, входить под своими учётными данными AWS и чтобы вся настройка облака выполнялась автоматически, а вам «из коробки» были доступны функции, которых нигде больше нет?

Qovery не только позволяет развёртывать инфраструктуру и приложения в приложении, войдя с учётной записью AWS, но и предоставляет интересные функции, материалом об одной из которых мы делимся к старту курса по Fullstack-разработке на Python.

Громкие уходы и обещанные релизы, полезные статьи и видео, крутые инструменты. Собираем картину уходящего года глазам сообщества во втором ежегодном опросе. Найди 5 минут, чтобы подвести итоги своего PHP-года — подробности под катом. 

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

"Разработчик – это человек, который переводит мысли заказчика на язык машины"
@mikita_du

Идея статьи появилась год назад, думал назвать «Вёрстка в 2021», но как-то затянулось… Весной 2021 года Microsoft объявила, что с 15 июня 2022 года прекращается поддержка IE11 (да, не для всех версий Win 10, но всё же), а значит, к выходу статьи уже останется менее полугода до знаменательного события, когда не придётся верстать под IE.

Для меня же это значит, что можно будет по полной использовать новые стандарты браузеров, в частности – css-variables, grid layout.

Для удобства отражения сайта на мобильных устройствах зачастую нужно внедрить в проект страницу Accelerated Mobile Pages (AMP). Делимся примером, как можно выполнить эту задачу, если вы работаете с приложением на React.

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

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

Именно такая задача появилась в одном из наших проектов, где стек технологий включал в себя Next.js, React, Styled components и Effector, при этом не было доступа к стору на стороне клиента. Большинство инструкций и гайдов по внедрению AMP, в свою очередь, были ориентированы на обычные html-страницы.

Была у меня мечта - писать backend на C++. А вот разбираться в unix socket'ах, TCP, многопоточной/асинхронной обработке запросов и во многом другом совсем не хотелось. Не верил я, что до сих пор нет каких-то минималистичных фреймворков. И сегодня я вам расскажу, как можно просто сделать HTTP API микросервис на C++ с помощью фреймворка Drogon.

Современное представление о REST сильно отличается от концепции архитектурного стиля, описанной в диссертации его создателя, Роя Филдинга. В этой статье разберемся, как ограничения REST понимал их автор.

С недавнего времени в Starlette прекращена поддержка GraphQL. Так что если вы, как и мы, занимались разработкой сервиса на FastAPI, то обновления до последней версии Starlette вас неприятно удивили.

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

Когда вы Когда вы открываете любой сайт — например, google или facebook, вы видите конечный продукт. Но чтобы этот продукт увидеть, и пощупать, нужно:

1. Написать код приложения

2. Собрать проект

3. Поднять его на сервере приложения

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

Меня зовут Михаил Сахнюк и я разрабатываю фронтенд уже более шести лет. Сейчас я фронтенд разработчик в Miro. 

В статье рассмотрим:

• как оптимизировать веб-приложение и ускорить его загрузку;

• почему это важно;

• какие инструменты помогут в работе над оптимизацией, замерами и контролем результатов;

• преимущества работы с загружаемыми модулями в приложениях.

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

Статья — конспект моего доклада на конференции Mergeconf 2021 в Иннополисе. 

Здравствуйте друзья, коллеги и остальные Хаброюзеры.

Хочу рассказать как используя бесплатные модули для сайта создать полноценный сайт для продажи билетов с платежами онлайн для Кинотеатров, Музеев, Театров, Выставок, Тренингов, Уроков, Цирков, Мастер-классов и прочих.

Ожидается полная поддержка Пушкинской Карты. (Работает только приём платежей)

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

У невероятного роста Youtube есть одно последствие, радостное и грустное одновременно - множество историй потеряются под слоями новой краски. Именно поэтому я хочу рассказать одну из них - историю того, как 10 лет назад маленькая команда веб-разработчиков задумала убить IE6 с помощью Youtube и даже не получила за это по шапке.

Я не могу вспомнить то конкретное событие, из-за которого наша команда разработки начала строить планы убийства браузера за обедом в столовой Youtube. Возможно, в тот раз я случайно отправил в релиз CSS-стиль, где был указан селектор атрибута на нестандартном HTML-элементе. Любой здравомыслящий веб-разработчик предположил бы, что если браузер не может распознать элемент - он молча пропустит данное описание. Но со старыми версиями IE дело обстояло не так. В определенных условиях это приводило либо к внутренней рекурсии и падению браузера (если повезет), или даже к синему экрану смерти (если не повезет).

А может быть, в сотый раз кто-то из наших разработчиков использовал тег <img> без указания атрибута src. От новичков никто не требовал быть в курсе, что в старых версиях IE вместо пустого аттрибута src подставляется корневой путь ("/"). Это внезапно превращает тег <img> в <iframe>, загружая главную страницу и все связанные с ней ресурсы, что может привести к бесконечной рекурсии. Когда пустой тег <img> случайно просачивался на главную страницу - вся команда в экстренном режиме искала его, пока сервера не расплавились под нагрузкой.

В общем, не вдаваясь в подробности - это была настоящая жесть, и она была связана с IE6. Этот браузер сильно отравлял жизнь всей нашей команде разработки. По меньшей мере 1-2 недели из каждого мажорного релиза отводились на то, чтобы заставить новый UI работать под IE6. Несмотря на всю эту боль, нас заставляли поддерживать его ради пользователей, которые не могут обновиться или работают в компаниях, где обновление запрещено политиками безопасности. Пользователи IE6 на тот момент составляли примерно 18% от общего числа. Все понимали, что просто так прекратить его поддержку нельзя, но когда мы сидели в той столовой после нескольких бессонных ночей, на сопереживание тем несчастным пользователям просто не оставалось сил. Мы начали коллективно фантазировать о том, как отомстить IE6. Одна идея сразу привлекла всеобщее внимание: а что, если мы просто пригрозим прекратить поддержку? Как отреагируют пользователи? Они поднимут бунт против Youtube, начнут присылать нам письма с угрозами расправы (как это уже случалось раньше)? Или вдруг станут апологетами новых браузеров? Мы мечтали о том, как офисные работники по всему миру внезапно начнут придумывать причины, по которым обновление браузеров жизненно необходимо для бизнеса, а бабушки и дедушки возьмут своих технически прошаренных внуков в заложники, чтобы те "починили им ютубы". То, что началось как сеанс групповой психотерапии, стало превращаться в конкретный план действий, для реализации которого у нас были уникальные условия.